<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情 - 体育比分网</title>
    <script src="../common/js/tailwindcss.js"></script>
    <script src="../common/js/lucide.min.js"></script>
    <style>
        /* 添加一些详情页面特定的样式 */
        .news-content img {
            max-width: 100%;
            height: auto;
            margin: 1rem 0;
        }

        .news-content p {
            margin-bottom: 1rem;
            line-height: 1.75;
        }
    </style>
</head>
<body class="min-h-screen bg-gray-100">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-40">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center h-16">
            <button onclick="history.back()"
                    class="p-2 rounded-md hover:bg-gray-100">
                <i data-lucide="arrow-left"></i>
            </button>
            <span class="ml-4 text-xl font-bold">新闻详情</span>
        </div>
    </div>
</nav>

<!-- 主要内容 -->
<main class="max-w-4xl mx-auto px-4 py-6">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <!-- 新闻标题 -->
        <h1 id="newsTitle" class="text-2xl font-bold mb-4"></h1>

        <!-- 新闻信息 -->
        <div class="flex items-center text-sm text-gray-500 mb-6">
            <span id="newsSource" class="text-blue-500 mr-4"></span>
            <span id="newsTime"></span>
        </div>

        <!-- 新闻图片 -->
        <img id="newsImage"
             class="w-full rounded-lg mb-6 object-cover max-h-96"
             alt="新闻图片">

        <!-- 新闻内容 -->
        <div id="newsContent" class="news-content prose max-w-none">
            <!-- 新闻正文将在这里显示 -->
        </div>

        <!-- 原文链接 -->
        <div class="mt-8 pt-4 border-t">
            <a id="newsUrl"
               target="_blank"
               rel="noopener noreferrer"
               class="text-blue-500 hover:text-blue-600 flex items-center">
                <i data-lucide="external-link" class="w-4 h-4 mr-2"></i>
                查看原文
            </a>
        </div>
    </div>
</main>

<script>
    // 初始化图标
    lucide.createIcons();

    // 格式化时间函数
    function formatTime(dateStr) {
        const date = new Date(dateStr);
        return date.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    }

    // 页面加载时获取并显示新闻详情
    document.addEventListener('DOMContentLoaded', () => {
        const newsData = localStorage.getItem('currentNews');
        if (!newsData) {
            window.location.href = '/news/news.html';
            return;
        }

        const news = JSON.parse(newsData);

        // 设置页面标题
        document.title = news.title + ' - 体育比分网';

        // 更新页面内容
        document.getElementById('newsTitle').textContent = news.title;
        document.getElementById('newsSource').textContent = news.source;
        document.getElementById('newsTime').textContent = formatTime(news.publishedAt);

        const newsImage = document.getElementById('newsImage');
        newsImage.src = news.image || '../../common/images/default-news.jpg';
        newsImage.onerror = function() {
            this.src = '../../common/images/default-news.jpg';
        };

        document.getElementById('newsContent').innerHTML = `
                <p class="text-lg leading-relaxed">${news.description}</p>
            `;

        const newsUrl = document.getElementById('newsUrl');
        newsUrl.href = news.url;
    });
</script>
</body>
</html>
